<template>
    <base-page>
        <view slot="header">
            <cu-custom :isBack="true" bgColor="bg-white">
                <block slot="content">个人信息设置</block>
            </cu-custom>
        </view>
        <view slot="center" class="auto-100 content-wrapper bg-gray">

			<view class="wrapper bg-white" v-if="userInfo">
				<view class="avatar-wrapper df-cen-rl boder-padding ">
					<view class="item"> 头像</view>
					<view class="avatar" @tap="upLoadAvatar">
						<image
							:src="userInfo.headimg?userInfo.headimg:'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/avatar.png'">
					</view>
					<view class="icon">
						<image
							src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/rightarrow.png">
					</view>
				</view>
				<view class="name df-cen-rl boder-padding">
					<view class="item"> 昵称</view>
					<input placeholder="给自己起个昵称吧~" maxlength='10' v-model="name" type="text" class="ipt" />
				</view>
				<view class="name df-cen-rl boder-padding">
					<view class="item"> 生日</view>
					<picker mode="date" :value="birthday" start="1960-09-01" end="2021-09-01" @change="DateChange">
						<view class="ipt">
							{{birthday?birthday:'请选择生日日期'}}
						</view>
					</picker>
				</view>
				<view class="sex df-cen-rl boder-padding">
					<view class="item"> 性别</view>
					<uni-button class="cu-btn round sexual" :class="{'bg-blue':sexPick}" @click='sexPick=1'>♂男
					</uni-button>
					<uni-button class="cu-btn round sexual" :class="{'bg-gradual-orange':!sexPick}" @click='sexPick=0'>
						♀女</uni-button>
				</view>
				<view class="textarea">
					<view>个人简介</view>
					<textarea v-model="txt" placeholder="输入你的个人简介" maxlength='200' class="txtareaipt"></textarea>
				</view>
				<view class="btn bg-gradual-orange round" @click="saveInfo">确定</view>
			</view>
		</view>
	</base-page>
</template>

<script>
import {
    getMemberDetail
} from '@/common/js/request/modules/public.js'
// #ifdef H5
import {
    mapGetters
} from 'vuex'
// #endif

export default {
    data() {
        return {
            submiting: true,
            name: '',
            sexPick: true,
            txt: '',
            avatarPaths: '',
            birthday: '',
            // ...{
            //     name: '111',
            //     sexPick: 1,
            //     txt: '23123',
            //     avatarPaths: '',
            //     birthday: '2020-09-01'
            // },
            userInfo: {},
            timeStampBirthday: ''
        };
    },
    onLoad(e) { },
    onShow(e) {
        if (this.isNativeApp() && this.env.includes('Android')) {
            if (window.sendImg) {
                window.sendImg = url => {
                    if (url) {
                        this.userInfo.headimg = url
                    }
                };
            }
        }
    },
    computed: {
        // #ifdef H5
        ...mapGetters(['env'])
        // #endif
    },
    methods: {
        upLoadAvatar() {
            // #ifdef H5
            if (this.isNativeApp() && this.env.includes('Android')) {
                // console.log('安卓环境');
                this.$Sdk.uploadAvatar()
            } else {
                this.$Utils.upImg().then(res => {
                    this.userInfo.headimg = res.data.pic_path;
                    // console.log(this.avatarPaths);
                })
            }
            // #endif
            // #ifndef H5
            this.$Utils.upImg().then(res => {
                this.userInfo.headimg = res.data.pic_path;
                // console.log(this.avatarPaths);
            })
            // #endif
        },
        DateChange(e) {
            this.birthday = e.detail.value
            // console.log(this.birthday);
        },
        saveInfo() {
            if (!this.submiting) return
            var regex = new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1,20}$")
            if (!regex.test(this.name)) {
                this.$Utils.tip('请输入正确的昵称: 数字、中文、英文')
                return
            }

            this.modifyInfo()
            this.$Sdk.refreshUserInfo()
            this.$Utils.tip('修改成功')

            setTimeout(() => {
                //#ifdef H5
                if (this.isNativeApp()) {
                    this.$Sdk.exit();
                } else {
                    uni.reLaunch({
                        url: '/shopPages/my/index'
                    });
                }
                // #endif
                // #ifdef MP-WEIXIN
                uni.reLaunch({
                    url: '/shopPages/my/index'
                });
                // #endif
            }, 500)
        },
        modifyInfo() {
            this.submiting = false
            let fields = {
                nickname: this.name,
                headimg: this.userInfo.headimg,
                birthday: this.birthday,
                sex: this.sexPick,
                introduce: this.txt,
            }
            // console.log(fields);
            this.$Apis.modifyInfo(fields).then(res => {
                this.submiting = true
                if (res == 1) {
                    this.$Utils.tip('修改成功')
                }
            });
        },
        getUserInfo() {
            getMemberDetail().then(res => {
                // console.log(res);
                this.userInfo = res
                this.name = res.nickname
                this.avatarPaths = res.headimg
                this.birthday = this.$Utils.formatDate(res.birthday * 1000)
                this.sexPick = res.sex
                this.txt = res.introduce
                // console.log(this.userInfo);
            });
        }
    },
    mounted() {
        this.getUserInfo()
    }
};
</script>

<style lang="scss">
.textarea {
    padding: 15px 0;

    .txtareaipt {
        margin-top: 10px;
        width: 100%;
        padding: 10px;
        font-size: 12px;
        border: 1px solid rgb(233, 232, 232);
    }
}

.btn {
    margin: 15px auto;
    width: 80%;
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
}

.sex {
    .item {
        flex: 1;
    }

    .sexual {
        font-size: 10px;
        text-align: center;
        margin-left: 10px;
        padding: 5px 13px;
        letter-spacing: 2px;
    }
}

.wrapper {
    padding: 0 15px 20px;
}

.boder-padding {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #f4f4f4;
}

.avatar-wrapper {
    .item {
        flex: 1;
    }

    .avatar {
        width: 50px;
        height: 50px;

        image {
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }
    }

    .icon {
        width: 16px;
        height: 16px;

        image {
            width: 100%;
            height: 100%;
        }
    }
}

.name {
    .ipt {
        flex: 0.5;
        text-align: right;
        font-size: 14px;
    }

    .item {
        flex: 0.5;
    }
}
</style>
